<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>upload</title>
    <style>
        {% include 'css/resetcss.css' %}

        body {
            background-color: #f8f8f8;
            height: 100vh;
            margin: 0;
            width: 100%;
            font-size: 0.8rem;
        }

        textarea {
            width: 100%;
            height: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            box-sizing: border-box;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            word-break: break-all;
            font-family: 黑体, system-ui;
            resize: none; /* 禁止拖拽 */
            position: relative;
            left: 10px;
        }

        /* 设置表单的样式 */
        .form_div {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 100vh;
            padding: 0;
            border-radius: 4px;
        }

        .form_left {
            width: 25%;
            height: 80%;
            margin-top: 5%;
            margin-bottom: 5%;
            position: relative;
            left: 20%;
        }

        .form_right {
            width: 20%;
            height: 80%;
            padding: 0;
            border-radius: 4px;
            position: relative;
            right: 20%;
            margin: auto 5%;
        }

        /* 设置滚动条的样式 */
        textarea::-webkit-scrollbar {
            width: 10px;
        }

        /* 设置滚动条的轨道样式 */
        textarea::-webkit-scrollbar-track {
            background-color: #f1f1f1;
        }

        /* 设置滚动条的滑块样式 */
        textarea::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 5px;
        }

        /* 设置滚动条的滑块悬停样式 */
        textarea::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }

        /* 设置下拉框的样式 */
        select {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: none;
            border-radius: 3px;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s;
        }

        /* 设置下拉框获取焦点时的样式 */
        select:focus {
            outline: none;
            box-shadow: 0 0 5px #4CAF50;
        }

        /* 设置表单输入框的样式 */
        input[type="text"],
        select {
            width: 100%;
            padding: 15px;
            margin-bottom: 15px;
            border: none;
            border-radius: 4px;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        /* 设置提交按钮的样式 */
        input[type="submit"],
        button[type="submit"],
        button[type="button"],
        input[type="button"] {
            position: relative;
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: #fff;
            cursor: pointer;
        }

        /* 设置提交按钮的鼠标悬停样式 */
        input[type="submit"]:hover,
        button[type="submit"]:hover,
        button[type="button"]:hover,
        input[type="button"]:hover {
            background-color: #45a049;
        }

        /* 设置结果标签的样式 */
        #look_result {
            display: block;
            margin-top: 10px;
            text-align: center;
        }

        .dropdown-menu div {
            padding: 10px;
            background-color: #f1f1f1;
            cursor: pointer;
        }

        .dropdown-menu div:hover {
            background-color: #ddd;
        }

        /* 进度条样式 */
        .progress-bar {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 100%;
            background-color: #f1f1f1;
            transition: width 0.5s ease-in-out;
        }
    </style>
    <script>
        function onModeDdChange() {
            // 获取下拉框元素
            const dropdown = document.getElementById("modeDd");

            // 获取选中的选项值
            const selectedValue = dropdown.value;

            const inputs = document.getElementById("mode");
            inputs.innerHTML = "";
            // 根据选项值进行相应的处理
            if (selectedValue === "all") {

            } else if (selectedValue === "logs") {

            } else if (selectedValue === "custom") {
                const input1 = document.createElement("input");
                input1.type = 'text';
                input1.placeholder = '匹配开始字符';
                inputs.appendChild(input1);
                const input2 = document.createElement("input");
                input2.type = 'text';
                input2.placeholder = '匹配结束字符';
                inputs.appendChild(input2);
            }
        }

        function onSignDdChange() {
            // 获取下拉框元素
            const dropdown = document.getElementById("signDd");

            // 获取选中的选项值
            const selectedValue = dropdown.value;

            const inputs = document.getElementById("sign");
            inputs.innerHTML = "";
            // 根据选项值进行相应的处理
            if (selectedValue === "yes") {
                const input1 = document.createElement("input");
                input1.type = 'text';
                input1.name = 'sn'
                input1.placeholder = '设备SN';
                inputs.appendChild(input1);
                const input2 = document.createElement("input");
                input2.type = 'text';
                input2.name = 'secret'
                input2.placeholder = '设备密钥';
                inputs.appendChild(input2);
            }
        }
    </script>
    {% load static %}
    <script src="{% static 'js/alert.js' %}"></script>
    <script src="{% static 'js/validForm.js' %}"></script>
</head>
<body>
<form class="form_div" id="my_form">
    <!--{% csrf_token %}-->
    <div class="form_left">
        <label>
            <textarea name="report_text" id="report_text" placeholder="请输入上报文本"></textarea>
        </label>
    </div>
    <div class="form_right">
        <label><select id="envDd" class="select2">
            <option disabled>--请选择环境--</option>
            <option value="dev">开发环境</option>
            <option value="release">预发环境</option>
            <option value="prod" disabled>生产环境</option>
        </select>
            <input type="hidden" id="env" name="env">
        </label>
        <label><select id="modeDd" class="select2" onchange="onModeDdChange()">
            <option disabled>--选择文件匹配格式--</option>
            <option value="logs">日志查找</option>
            <option value="all">全匹配</option>
            <option value="custom">自定义查找</option>
        </select>
            <input type="hidden" id="match_mode" name="match_mode">

        </label>
        <div id="mode"></div>
        <label><select id="signDd" class="select2" onchange="onSignDdChange()">
            <option disabled>--是否需要签名--</option>
            <option value="no">不需要签名</option>
            <option value="yes">需要签名</option>
        </select>
            <input type="hidden" id="is_sign" name="is_sign">
        </label>
        <div id="sign"></div>
        <label>
            <input type="text" name="up_time" max="6"
                   placeholder="上报时间间隔 (ms , 默认 1000 ms)">
        </label>
        <label>
            <button type="button" value="测试上报数据">测试上报数据</button>
        </label>
        <label id="look_result"> </label>
        <button type="submit" id="submitButton">提 交
            <div id="progressBar" class="progress-bar"></div>
        </button>
    </div>
</form>
<!-- 处理提交⌛事件-->
<script>
    // 添加校验
    onFocusInputNotEmpty("report_text")

    // 获取表单元素
    const form = document.getElementById('my_form');

    // 表单提交事件处理函数
    function handleSubmit(event) {
        event.preventDefault(); // 阻止表单的默认提交行为
        submitForm()// 表单赋值
        // 执行表单校验逻辑
        if (validateForm()) {
            console.log("------> submit 事件")
            const progressBar = document.getElementById("progressBar");
            progressBar.style.width = "100%"; // 设置初始进度为100%
            // 模拟进度更新，每1秒减少10%
            let progress = 100;
            const intervalId = setInterval(function () {
                progress -= 10;
                progressBar.style.width = progress + "%";
                if (progress <= 0) {
                    clearInterval(intervalId);
                    // 在这里执行提交表单的操作
                    // 例如：document.getElementById("myForm").submit();
                }
            }, 1000);
        }

    }

    // 表单校验函数
    function validateForm() {
        // 执行表单校验逻辑，返回校验结果
        // 如果校验通过，返回 true；否则返回 false
        console.log("校验逻辑 ... ")
        return onSubmitInputNotEmpty(["report_text"])
    }

    // 绑定提交按钮的点击事件
    const submitButton = document.getElementById('submitButton');
    submitButton.addEventListener('click', handleSubmit);

    function getSelectValue(id) {
        return document.getElementById(id).value
    }

    function setInputValueById(id, value) {
        document.getElementById(id).value = value;
    }

    function submitForm() {
        console.log("submit ... ")
        const modeValue = getSelectValue("modeDd");
        console.log("modeValue ---> ", modeValue)
        setInputValueById("match_mode", modeValue)
        const signValue = getSelectValue("signDd");
        setInputValueById("is_sign", signValue)
        const envValue = getSelectValue("envDd")
        setInputValueById("env", envValue)
    }
</script>
</body>
</html>